<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    append-to-body
    class="details-wrapper"
    fullscreen
    @close="closeDialog"
  >
    <dr-show-card
    :show-card-param="showCardHeaderParam"
    ref="headerShowCard"
    @changeForm="changeForm(arguments)"
    >
    </dr-show-card>
    <el-tabs>
      <el-tab-pane label="基本信息">
        <dr-show-card
          :show-card-param="showCardInfoParam"
          ref="infoShowCard"
          @saveEdit="saveEdit(arguments)"
        >
        </dr-show-card>
      </el-tab-pane>
    </el-tabs>
    <dr-edit-form ref="editDialog"
                  :edit-form-param="editFormParam"
                  @initEdit="initEdit(arguments)"
                  @saveEdit="saveClientEdit(arguments)"
    >
    </dr-edit-form>
  </el-dialog>
</template>

<script>
import {getClientBase, updateClientBase} from '@/api/rydemo/client/base'

export default {
  name: 'newDetail',
  props: {
    title: {
      type: String,
      default: '客户详情'
    },
    editable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      editDiabled:false,
      pickerOptions: {
        disabledDate (time) {
          // 禁用以后的时间
          return time.getTime() > Date.now() - 8.64e6
        },
      },
      toggleButton: {
        altering: false,
        text: '编 辑'
      },
      visible: false,
      //审批按钮是否可视
      buttonVisible: false,
      // 遮罩层
      loading:null,
      client:{},
      showCardHeaderParam:{
        isHeader: true,
        headerColumns:[
          {
            isRealColumn: true,
            columnName: 'name',
            chineseName: '客户名称',
            columnType: 'INPUT'
          },
          {
            isRealColumn: true,
            columnName: 'customerType',
            chineseName: '客户角色',
            columnType: 'SELECT',
            dict: 'customer_type'
          },
          {
            isRealColumn: true,
            columnName: 'credentialsType',
            chineseName: '证件类型',
            columnType: 'SELECT',
            dict: 'certificate_type'
          },
          {
            isRealColumn: true,
            columnName: 'creditCode',
            chineseName: '证件号码',
            columnType: 'INPUT'
          },
          {
            isRealColumn: true,
            columnName: 'aclDeptText',
            chineseName: '所属部门',
            columnType: 'INPUT'
          },
          {
            isRealColumn: true,
            columnName: 'createTime',
            chineseName: '建户日期',
            columnType: 'DATE',
            dateFormat:'{y}-{m}-{d}'
          }
        ],
        cardTitle:'客户A'
      },
      showCardInfoParam:{
        isHeader: false,
        cardTitle: '基本资料',
        showCardRules: {},
        formList:[
          {
            showFormFieldList:[
              {
                isRealColumn: true,
                columnName: 'name',
                chineseName: '客户名称',
                columnType: 'INPUT',
                xl: 6,
                md: 8,
                sm: 12,
                xs: 24
              },
              {
                isRealColumn: true,
                columnName: 'customerType',
                chineseName: '客户角色',
                columnType: 'SELECT',
                dict: 'customer_type',
                xl: 6,
                md: 8,
                sm: 12,
                xs: 24
              }
            ],
            formTitle: '基础信息'
          },
          {
            showFormFieldList: [
              {
                isRealColumn: true,
                columnName: 'credentialsType',
                chineseName: '证件类型',
                columnType: 'SELECT',
                dict: 'certificate_type',
                xl: 6,
                md: 8,
                sm: 12,
                xs: 24
              },
              {
                isRealColumn: true,
                columnName: 'creditCode',
                chineseName: '证件号码',
                columnType: 'INPUT',
                xl: 6,
                md: 8,
                sm: 12,
                xs: 24
              }
            ],
            formTitle: '证件信息'
          }
        ]
      },
      editFormParam: {
        dialogTitle : '客户信息',
        formList:[
          {
            formTitle:'测试表1',
            editFormFieldList: [
              {
                columnType: 'INPUT',
                chineseName: '客户名称',
                columnName: 'name'
              },
              {
                columnType:'SELECT',
                chineseName: '客户角色',
                columnName: 'customerType',
                dict: 'customer_type'
              }
            ],
          },
          {
            formTitle:'测试表2',
            editFormFieldList: [
              {
                columnType:'SELECT',
                chineseName: '证件类型',
                columnName: 'credentialsType',
                dict: 'certificate_type'
              },
              {
                columnType: 'INPUT',
                chineseName: '证件号码',
                columnName: 'creditCode'
              }
            ],
          }]
      }
    }
  },
  created() {
  },
  methods: {
    //页面所有信息初始化
    init(clientId) {
      this.initClient(clientId)
    },
    //顶部编辑按钮 ************************************************************************
    changeForm(msg) {
      this.$nextTick(_ => {
        this.$refs['editDialog'].formType = 'edit'
        this.$refs['editDialog'].init(this.client)
        this.$refs['editDialog'].open = true
      })
    },
    initEdit(msg){
      this.$nextTick(_ => {
        let row = msg[0]
        this.$refs['editDialog'].form  = row
      })
    },
    saveClientEdit(msg){
      this.$nextTick(_ => {
        let form = msg[0]
        updateClientBase(form).then(response => {
          if (response.code === 200) {
            this.msgSuccess('修改成功')
            this.$refs['editDialog'].open = false
            this.initClient(form.id)
          }
        })
      })
    },
    saveEdit(msg) {
      this.$nextTick(_ => {
        let form = msg[0]
        updateClientBase(form).then(
          response => {
            if(response.code === 200){
              this.msgSuccess('修改成功')
              this.$refs['infoShowCard'].toggleButton = {
                altering: false,
                text: '编 辑'
              }
            }
          }
        )
      })
    },
    //初始化客户基本信息
    initClient(id) {
      this.$nextTick(_ => {
        if (id && id !== -1) {
          getClientBase(id).then(response => {
            this.client = response.data
            this.$refs['headerShowCard'].form = this.client
            this.$refs['infoShowCard'].form = this.client
            setTimeout(() =>{
              this.$refs['headerShowCard'].$forceUpdate()
              this.$refs['infoShowCard'].$forceUpdate()
            },1000);
          })
        }
      })
    },
    // 遮罩层
    openFullScreen() {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)'
      });
    },
    handleLoad() {
      this.timer = new Date().getTime()
    },
    // 弹窗关闭事件
    closeDialog() {
      //this.reset()
      //this.$nextTick(() => {
      //  this.$refs['form'].resetFields()
      //});
      this.$emit('refreshDataList')
      this.visible = false
    }
  }
}
</script>

<style lang="scss">
@import "~@/assets/styles/page-detail.scss";
</style>
<style lang="scss" scoped>
@import "~@/assets/styles/page-detail-scoped.scss";
</style>
